<template>
  <div>
    <el-container>
      <el-header><top-bar></top-bar></el-header>
      <el-main
        ><search-bar></search-bar>

        <el-card class="big-login-card">
          <el-divider>登录</el-divider>
          <div id="content-card">
            <div id="introduce-card">
              <div id="introduce-title">就爱电子商城</div>
              <div id="introduce-content">
                <span>
                  用最严格的眼光把控商品，用心选好货。大牌好货，就来就爱商城
                </span>
              </div>
            </div>
            <el-divider id="shuxian" direction="vertical"></el-divider>
            <div id="login-card">
              <el-form
                :rules="rules"
                :model="formLabelAlign"
                ref="formLabelAlign"
                :label-position="labelPosition"
                label-width="80px"
              >
                <el-form-item label="用户名" prop="username">
                  <el-input v-model="formLabelAlign.username"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                  <el-input
                    type="password"
                    v-model="formLabelAlign.password"
                  ></el-input>
                </el-form-item>
                <el-row>
                  <el-button
                    type="success"
                    @click="
                      login();
                      dialogFormVisible = true;
                    "
                    round
                    >登陆</el-button
                  >
                  <el-button type="info" @click="register" round
                    >注册</el-button
                  >
                </el-row>
              </el-form>
            </div>
          </div>
        </el-card>
        <router-view></router-view>
      </el-main>
      <el-footer>Footer</el-footer>
    </el-container>
  </div>
</template>

<script>
import TopBar from "../TopBar/TopBar.vue";
import SearchBar from "../SearchBar/SearchBar.vue";
import { Login } from "../../../api/LoginAndRegister";

import {
  setToken,
  SetUserId,
  SetUserName,
  SetPassWord,
  SetUserRole,
} from "../../../utils/auth";
export default {
  components: {
    TopBar,
    SearchBar,
  },

  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.formLabelAlign.validatePass !== "") {
          this.$refs.formLabelAlign.validateField("validatePass");
        }

        callback();
      }
    };
    return {
      labelPosition: "right",
      formLabelAlign: {
        name: "",
        region: "",
        username: "",
        password: "",
      },
      location: null,
      rules: {
        username: [
          { required: true, message: "请输入您的名称", trigger: "blur" },
        ],
        password: [
          { required: true, validator: validatePass, trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    register() {
      this.$router.push({ path: "/register" });
    },
    login() {
      Login({
        username: this.formLabelAlign.username,
        password: this.formLabelAlign.password,
      })
        .then((data) => {
          var res = data.data.data;
          if (data.data.code != 105) {
            if (data.data.code == 200) {
              if (res.user.userRole == "用户") {
                setToken(res.token, res.refreshToken);
                SetUserId(res.user.id);
                SetUserName(res.user.userName);
                SetUserRole(res.user.userRole);
                SetPassWord(res.user.passWord);
                this.$router.push({ path: "/" });
              } else if (res.user.userRole == "商家") {
                console.log("商家");
                setToken(res.token, res.refreshToken);
                SetUserId(res.user.id);
                SetUserName(res.user.userName);
                SetPassWord(res.user.passWord);
                SetUserRole(res.user.userRole);
                this.$router.push({ path: "/" });
              } else if (res.user.userRole == "管理员") {
                console.log("管理员");
                setToken(res.token, res.refreshToken);
                SetPassWord(res.user.passWord);
                SetUserId(res.user.id);
                SetUserName(res.user.userName);
                SetUserRole(res.user.userRole);
                this.$router.push({ path: "/" });
              } else if (res.user.userRole == "供应商") {
                console.log("供应商");
                setToken(res.token, res.refreshToken);
                SetPassWord(res.user.passWord);
                SetUserId(res.user.id);
                SetUserName(res.user.userName);
                SetUserRole(res.user.userRole);
                this.$router.push({ path: "/" });
              }
            } else {
              this.$message.error("用户名密码错误");
            }
          } else {
            this.$message.warning("该用户已被冻结");
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style scoped>
.el-header,
.el-footer {
  background-color: #333;
  color: #333;
  text-align: center;
  line-height: 40px;
}
.el-header {
  height: 40px !important;
  padding: 0 120px;
}

.el-main {
  background-color: whitesmoke;
  color: #333;
  text-align: center;
  /* line-height: 160px; */
  min-height: 750px;
  height: 100%;
  padding: 0;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

/* 登录的父级卡片 */
.big-login-card {
  background-image: linear-gradient(aliceblue, snow);
  margin-top: 30px;
  min-height: 300px;
  box-shadow: none;
}

/* 深度选择登录父级卡片中的body */
.big-login-card >>> .el-card__body {
  width: 50%;
  margin: auto;
}

/* 登录的祖级卡片 */
#content-card {
  display: flex;
}


/* 登录卡片 */
#login-card {
  margin-top: 50px;
  margin-right: auto;
  width: 100%;
  height: 300px;
}

/* 简介卡片 */
#introduce-card {
  margin-left: auto;
  width: 100%;
  height: 300px;
}
/* .logincss {
  display: flex;
  align-content: center;
  justify-content: center;
} */

/* 竖分割线 */


#introduce-title {
  font-size: 25px;
  font-weight: bold;
}
#introduce-content {
  text-align: left;
  text-indent: 2em;
  font-size: 18px;
  font-weight: bold;
}

#shuxian {
  font-size: 350px;
}

/* 横分割线内部文本样式 */
.el-divider,
.el-divider--horizontal >>> .el-divider__text,
.is-center {
  font-size: 35px;
  font-weight: bold;
}
</style>